<template>
  <div class="search-container">
    <!-- 固定的搜索框 -->
    <!-- 只有在这个search组件外部 写一个form标签， 然后写一个action； 在ios上面，我们的输入法的 右下键 就会有一个搜索按钮 -->
    <form action="/">
      <!-- 现在要按需展示三个组件， 我们就需要 search的三个事件， 来动态的修改这个值 -->
      <!-- show-action 右侧显示取消文字 
      @cancel="$router.go(-1)" 点击搜索框右侧取消触发
      @search="onSearch"  点击回车后触发
      @input="searchTextInput" 输入框内容变化时触发-->
      <van-search
        v-model="searchText"
        placeholder="请输入内容"
        background="#3296fa"
        show-action
        @cancel="$router.go(-1)"
        @search="onSearch"
        @input="searchTextInput"
      />
    </form>

    <!-- 搜索历史 @Item_input="fnText('测试2', $event)"
    子组件删除全部搜索历史记录 子组件不能直接改数据, 
    通过父组件修改 @ALL_DELETE_EVENT="searchHistoryList = []"
    @ITEM_DELETE_EVENT="onSearch" 点击搜索历史每一项x 触发父组件事件-->
    <SearchHistory v-if="viewStatus == 'history'" 
    :searchHistoryList="searchHistoryList"
    @ALL_DELETE_EVENT="searchHistoryList = []"
    @ITEM_DELETE_EVENT="clearitemX($event)"/>

    <!-- 搜索建议 -->
    <!-- fnText('测试', $event, 'adfasd', 'sdafsdf') 演示接收子组件传递出来的多个参数 -->
    <SearchSuggestion v-if="viewStatus == 'suggestion'"
    :searchText="searchText"
    @SUGGESTION_EVENT="onSearch('测试搜索建议', $event)"/>

    <!-- 搜索结果  :searchText="searchText" 这是为了把父组件数据传递给子组件-->
    <SearchResult v-if="viewStatus == 'result'" :searchText="searchText" />
  </div>
</template>

<script>
import { searchHistoryAjax } from "@/api/search";
import { setItem, getItem } from "@/utils/storage";

import SearchHistory from "./components/search-history";
import SearchSuggestion from "./components/search-suggestion";
import SearchResult from "./components/search-result";

export default {
  components: {
    SearchHistory,
    SearchSuggestion,
    SearchResult
  },
  data() {
    return {
      // 搜索框输入的文字
      searchText: "",
      // 默认是在搜索历史
      viewStatus: "history", // suggestion建议  result结果,
      // 搜索历史列表  如果有值 就用本地值 没有就 空
      searchHistoryList: getItem("TOUTIAO_HISTORY") || []
    };
  },
  created() {},
  methods: {
    // 回车后触发 回车后肯定要把搜索内容存储到历史列表
    onSearch(params) {
      // console.log(params);
      // 按需回车键 触发的事件
      if (this.searchText) {
        this.viewStatus = "result";
        // 查找搜索内容在 搜索列表数组的索引 不能重复添加
        let index = this.searchHistoryList.indexOf(params);
        if (index !== -1) {
          // 不等于-1.就表示在数组里面找到了这个值，就是有重复的意思
          this.searchHistoryList.splice(index, 1);
          // 删掉这个重复的值后 把最新的搜索的内容添加到搜索历史列表
          this.searchHistoryList.unshift(params)
          // console.log(this.searchHistoryList);
        }else {
          this.searchHistoryList.unshift(params)
          // console.log(this.searchHistoryList);
        }
      }
      // console.log(this.viewStatus);
    },
    // 点击搜索历史x 通过子向父传值删除对应一项
    clearitemX(index) {
      console.log(index);
      this.searchHistoryList.splice(index, 1);
    },
    // 输入框内容变化触发
    searchTextInput(e) {
      if (e) {
        this.viewStatus = 'suggestion'
      } else {
        this.viewStatus = 'history'
      }
    },
    // 获得焦点触发
    searchInputFocus(e) {
      console.log(e) // 这个e和上面的e的值不一样，这个是focusEvent
      if (this.searchText) {
        this.viewStatus = 'suggestion'
      } else {
        this.viewStatus = 'history'
      }
    }
  },
  watch: {
    // 搜索历史动态存储获取
    searchHistoryList(newV) {
      //  newV  是搜索历史数组
      // console.log(111, newV)
      // 因为我们这个项目的历史接口只有4条数据，不合适，我们这里推荐采用本地储存
      setItem('TOUTIAO_HISTORY', newV)
    }
  }
};
</script>

<style lang="less" scoped>
.search-container {
  .van-search__action {
    color: rgb(232, 243, 242);
  }
}
</style>
